<template>
	<div class="footer">
		<!--底部-->
		<div class="foot">
			<img src="../assets/img/shouye/tuijian/shouye.png" alt=""/>
			<p>首页</p>
		</div>
		<!--分类-->
		<div class="foot">
			<img src="../assets/img/shouye/tuijian/fen.png" alt=""/>
			<p>分类</p>
		</div>
		<!--/断货王-->
		<div class="duanhuow">
			<img src="../assets/img/shouye/tuijian/duan.png" alt=""/>
		</div>
		<!--购物车-->
		<div class="foot">
			<img src="../assets/img/shouye/tuijian/gouwuche2.png" alt=""/>
			<p>购物车</p>
		</div>
		<!--个人中心-->
		<a href="#/MyShangCheng">
		<div class="foot">
			<img src="../assets/img/shouye/tuijian/zhongqian.png" alt=""/>
			<p>个人中心</p>
		</div>
		</a>
	</div>
</template>

<script>
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.footer {
		width: 100%;
		height: 9.6rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color:#FFFFFF;
		font-size: 2rem;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
	}
	.foot{
		text-align: center;
		margin-top: 0.5rem;
	}
	.duanhuow>img {
		width: 11.3rem;
		height: 5.5rem;
	}
	.foot>img {
		width: 4.8rem;
		height: 4.8rem;
	}
</style>